<template>
  <el-dialog
    v-model="visible"
    title="漏洞详情"
    width="800px"
    :close-on-click-modal="false"
  >
    <div class="detail-content" v-loading="loading">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-heading">基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="漏洞名称" :span="2">{{
            vulnerability.name || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="CVE编号">{{
            vulnerability.cve_id || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="漏洞ID">{{
            vulnerability.vulnerability_id || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="严重程度">
            <el-tag
              :type="
                vulnerability.severity === 'critical'
                  ? 'danger'
                  : vulnerability.severity === 'high'
                  ? 'warning'
                  : vulnerability.severity === 'medium'
                  ? 'info'
                  : vulnerability.severity === 'low'
                  ? 'success'
                  : ''
              "
              size="small"
            >
              {{ getSeverityText(vulnerability.severity) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="CVSS评分">
            {{
              vulnerability.cvss_score !== undefined &&
              vulnerability.cvss_score !== null
                ? `${vulnerability.cvss_score.toFixed(1)} / 10.0`
                : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="CWE分类">{{
            vulnerability.cwe_id || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="EPSS评分" v-if="vulnerability.epss_score">
            {{ vulnerability.epss_score }}
          </el-descriptions-item>
          <el-descriptions-item label="标签" :span="2">
            <el-tag
              v-for="tag in vulnerabilityTags"
              :key="tag"
              size="small"
              style="margin-right: 5px"
            >
              {{ tag }}
            </el-tag>
            <span v-if="vulnerabilityTags.length === 0">-</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 漏洞描述 -->
      <div class="detail-section" v-if="vulnerability.description">
        <h3 class="section-heading">漏洞描述</h3>
        <div class="description-content">
          {{ vulnerability.description }}
        </div>
      </div>

      <!-- 修复建议 -->
      <div class="detail-section" v-if="vulnerability.fix_suggestion">
        <h3 class="section-heading">修复建议</h3>
        <div class="description-content">
          {{ vulnerability.fix_suggestion }}
        </div>
      </div>

      <!-- POC信息 -->
      <div class="detail-section" v-if="vulnerability.has_poc">
        <h3 class="section-heading">POC信息</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="POC文件">{{
            vulnerability.file_name || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="文件路径">{{
            vulnerability.file_path || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="链接" v-if="vulnerability.link">
            <el-link :href="vulnerability.link" target="_blank" type="primary">
              {{ vulnerability.link }}
            </el-link>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
      <el-button
        v-if="vulnerability.has_poc"
        type="primary"
        @click="handleTest"
      >
        测试
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } from "vue";
import { ElMessage } from "element-plus";

// 定义props
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  vulnerability: {
    type: Object,
    default: () => ({}),
  },
});

// 定义emits
const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

// visible computed 属性
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit("update:modelValue", value),
});

const loading = ref(false);

// 标签列表
const vulnerabilityTags = computed(() => {
  if (Array.isArray(props.vulnerability?.tags)) {
    return props.vulnerability.tags;
  }
  if (typeof props.vulnerability?.tags === "string") {
    return props.vulnerability.tags.split(",").map((tag: string) => tag.trim());
  }
  return [];
});

// 获取严重程度文本
const getSeverityText = (severity: string): string => {
  const map: Record<string, string> = {
    critical: "严重",
    high: "高危",
    medium: "中危",
    low: "低危",
    info: "信息",
    unknown: "未知",
  };
  return map[severity] || severity || "-";
};

// 测试漏洞
const handleTest = () => {
  ElMessage.info(`测试漏洞: ${props.vulnerability.name}`);
  // TODO: 实现测试功能
};

// 取消
const handleCancel = () => {
  emit("update:modelValue", false);
};
</script>

<style scoped lang="scss">
.detail-content {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
}

.detail-section {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-heading {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #222;
  display: flex;
  align-items: center;
  gap: 8px;
}

.description-content {
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
  line-height: 1.6;
  color: #666;
  white-space: pre-wrap;
  word-break: break-word;
}
</style>
